<!DOCTYPE html>
<html>
	<head>
		<title>Canvas demo</title>
		<script type="text/javascript">
		window.onload = function(){
			var drawingCanvas = document.getElementById("myCanvas");
			
			var context = drawingCanvas.getContext('2d');
			
			//gele gezicht
			context.fillStyle = "#FFFF00";
			context.beginPath(); //maakt een teken pad aan
			context.arc(100, 100, 50, 0, 7, true); //teken een rondje (x positie, y positie, radius (dus rondje met straal 50), starthoek, eindhoek (2 keer pi om een rondje te maken), tegen de klok in getekend)
			context.closePath(); //sluit het teken pad
			context.fill(); //vult het gebruikte pad met in dit geval een rondje
			
			//ogen
			context.fillStyle = "#FFFFFF";
			context.beginPath();
			context.arc(80, 80, 8, 0, 7, true);
			context.closePath();
			context.fill();
			
			context.fillStyle = "#FFFFFF";
			context.beginPath();
			context.arc(120, 80, 8, 0, 7, true);
			context.closePath();
			context.fill();
			
			context.fillStyle = "#000000";
			context.beginPath();
			context.arc(80, 80, 2, 0, 7, true);
			context.closePath();
			context.fill();
			
			context.fillStyle = "#000000";
			context.beginPath();
			context.arc(120, 80, 2, 0, 7, true);
			context.closePath();
			context.fill();
			
			context.fillStyle = "#000000";
			context.beginPath();
			context.moveTo(70,110); //maak een subpath in 
			context.quadraticCurveTo(100, 150, 130, 110); //maak een buigende lijn aan
			context.quadraticCurveTo(100, 150, 70, 110);
			context.closePath();
			context.stroke();
		}
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="200px" height="200px"></canvas>
	</body>
</html>
